<template>
    <div class="login-box" :style="{paddingTop:H*.14+'px'}">
        <header>
            <img src="../../assets/images/login/cafeLogo.jpg" alt="" /> </header>
        <div class="contents">
            <div class="input1 input">
                <img src="../../assets/images/login/input1.jpg" alt="" />
                <input type="text" placeholder="账户" v-model.trim="username" /> </div>
            <div class="input2 input">
                <img src="../../assets/images/login/input1.jpg" alt="" />
                <input type="password" placeholder="密码" v-model.trim="pwd" @keydown="keyss" /> </div>
            <div class="goLogin" :style="{paddingTop:H*.104+'px',paddingBottom:H*.224+'px'}">
                <el-button type="primary" @click.native="goSys">登录</el-button>
            </div>
        </div>
        <footer>
            <div class="introduction">
                <span>帮助</span>
                <span>隐私</span>
                <span>条款</span>
            </div>
            <div class="copyright">copyright&thinsp;&copy;&thinsp;2018&thinsp;思爱咖啡</div>
        </footer>
    </div>
</template>
<script>
    import { isvalidUsername } from '@/utils/validate'
    import LangSelect from '@/components/LangSelect'
    import SocialSign from './socialsignin'
    import { login } from '@/api/login'
    import { setCookie } from '@/assets/js/cookie'
    import { asyncRouterMap } from '@/router/index'
    export default {
        components: {
            LangSelect,
            SocialSign
        },
        name: 'login',
        data() {
            const validateUsername = (rule, value, callback) => {
                if(!isvalidUsername(value)) {
                    callback(new Error('Please enter the correct user name'))
                } else {
                    callback()
                }
            }
            const validatePassword = (rule, value, callback) => {
                if(value.length < 6) {
                    callback(new Error('The password can not be less than 6 digits'))
                } else {
                    callback()
                }
            }
            return {
                loginForm: {
                    username: 'admin',
                    password: '1111111'
                },
                loginRules: {
                    username: [{
                        required: true,
                        trigger: 'blur',
                        validator: validateUsername
                    }],
                    password: [{
                        required: true,
                        trigger: 'blur',
                        validator: validatePassword
                    }]
                },
                passwordType: 'password',
                loading: false,
                showDialog: false,
                H: '', //浏览器的高度
                username: '', //账户
                pwd: '', //密码
                arr_one: [],
                arr_two: [],
                str_one: '', //一级菜单字符串
                str_two: '', //二级菜单字符串
            }
        },
        methods: {
            showPwd() {
                if(this.passwordType === 'password') {
                    this.passwordType = ''
                } else {
                    this.passwordType = 'password'
                }
            },
            handleLogin() {
                this.$refs.loginForm.validate(valid => {
                    if(valid) {
                        this.loading = true
                        this.$store.dispatch('LoginByUsername', this.loginForm).then(() => {
                            this.loading = false
                            this.$router.push({
                                path: '/'
                            })
                        }).catch(() => {
                            this.loading = false
                        })
                    } else {
                        console.log('error submit!!')
                        return false
                    }
                })
            },
            afterQRScan() {},
            //点击登录
            goSys() {
                if(this.username == '') {
                    this.$alert('请输入账户', '提示', {
                        confirmButtonText: '确定',
                    });
                    return;
                }
                if(this.pwd == '') {
                    this.$alert('请输入密码', '提示', {
                        confirmButtonText: '确定',
                    });
                    return;
                }
                //获取活动专题列表
                let obj = {};
                let self = this;
                obj.LOGINNAME = this.username
                obj.LOGINPWD = this.pwd;
                login(obj).then(res => {
                    if(res.data.STATUS_CODE === 15) {
                        this.$alert('用户名或密码错误', '提示', {
                            confirmButtonText: '确定',
                        });
                    } else if(res.data.STATUS_CODE === 1) {
                        //储存用户信息，第三个参数为天数，默认保留30天，
                        setCookie('name', this.username);
                        setCookie('userId', res.data.USER.CAFEUSER_ID);
                        setCookie('userName', res.data.USER.USERNAME);
                        setCookie('compId', res.data.USER.COMPID);
                        setCookie('Admin-Token', 'admin');
                        //0-功能  11-管理  19-统计  20-设置  
                        //asyncRouterMap[0].hidden = true;  
                        //asyncRouterMap[0].children[0].hidden = true;			        	
                        //登录
                        this.$store.dispatch('LoginByUsername', this.loginForm).then(() => {
                            this.$router.push({
                                path: '/'
                            });
                        })
                    }
                })
                /* --------------------测试打开，上线关闭-------------  */
                /*this.$store.dispatch('LoginByUsername', this.loginForm).then(() => {
                	this.$router.push({
                		path: '/'
                	});
                }).catch(() => {
                	console.log(0);
                })*/
            },
            //键盘enter登录
            keyss(event) {
                if(event.keyCode === 13) {
                    this.goSys();
                }
            }
        },
        created() {
            this.H = window.innerHeight;
        },
        destroyed() {}
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .login-box {
        min-height: 100%;
        background: #f1f3f6;
        box-sizing: border-box;
        header {
            display: flex;
        }
        header img {
            width: 203px;
            height: 137px;
            margin: 0 auto;
        }
        .contents {
            .input {
                position: relative;
                margin: 0 auto;
                width: 370px;
                img {
                    position: absolute;
                    top: 50%;
                    left: 10px;
                    transform: translateY(-50%);
                }
                input {
                    width: 370px;
                    height: 42px;
                    border-radius: 5px;
                    border: 0;
                    outline: 0;
                    text-indent: 30px;
                    font-size: 20px;
                }
                input::placeholder {
                    color: #c9c9c9;
                }
            }
            .input1 {
                margin-top: 60px;
                margin-bottom: 25px;
            }
            .goLogin {
                display: flex;
                justify-content: center;
                .el-button--primary {
                    width: 370px;
                    font-size: 22px;
                }
            }
        }
        footer {
            .introduction {
                display: flex;
                justify-content: center;
                span {
                    font-size: 16px;
                    color: #929395;
                    cursor: pointer;
                    &:hover {
                        color: #696969;
                        text-decoration: underline;
                    }
                }
                span:nth-of-type(2) {
                    margin: 0 42px;
                }
            }
            .copyright {
                font-size: 16px;
                color: #929395;
                text-align: center;
                margin-top: 15px;
            }
        }
    }
</style>